<template>
    <div>
        <breadcrumb :routerList="routerList"></breadcrumb>
        <div class="form-table">
            <el-form ref="form" :model="form" label-width="120px">
                <el-form-item label="账号名称">
                    <el-input v-model="form.supplier_name" :disabled="isDisabled"></el-input>
                </el-form-item>
                <el-form-item label="账号头像">
                    <el-upload
                            class="avatar-uploader"
                            action="https://yx.tfnhg.com/oss_upload"
                            :show-file-list="false"
                            :on-success="headSuccess"
                            :on-error="headError"
                            :disabled="isDisabled">
                        <img v-if="form.supplier_img" :src="form.supplier_img" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <span>注：建议上传220px*220px</span>
                </el-form-item>
                <el-form-item label="账号背景图">
                    <el-upload
                            class="avatar-uploader"
                            action="https://yx.tfnhg.com/oss_upload"
                            :show-file-list="false"
                            :on-success="bgSuccess"
                            :on-error="bgError"
                            :disabled="isDisabled">
                        <img v-if="form.back_img" :src="form.back_img" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <span>注：建议上传750px*320px</span>
                </el-form-item>
                <el-form-item label="店铺介绍">
                    <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="请输入店铺介绍"
                            v-model="form.supplier_content"
                        :disabled="isDisabled"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="运费">
                    <el-input v-model="form.freight" :disabled="isDisabled"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit" :disabled="isDisabled">提交</el-button>
                    <el-button @click="reset">修改</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import breadcrumb from '@/components/breadcrumb.vue'
    export default {
        name: "supplierInfo",
        components:{breadcrumb},
        data(){
            return {
                routerList:[
                    {
                        path:'',
                        name:'账号基础信息'
                    }
                ],
                form: {
                    supplier_name: '',
                    back_img:'',
                    supplier_img:'',
                    freight:'',
                    supplier_content:''
                },
                isDisabled:false
            }
        },
        created(){
            this.getSupplierInfo()
        },
        methods:{
            async getSupplierInfo(){
                let res = await this.$Http.getSupplierInfo({
                    id:this.$store.state.supplier_id
                })
                // console.log(res);
                this.form = {
                    id:res.id,
                    supplier_name:res.supplier_name,
                    back_img:res.back_img,
                    supplier_img:res.supplier_img,
                    freight:res.freight,
                    supplier_content:res.supplier_content
                }
            },
            onSubmit(){
                this.resetSupplierInfo()
            },
            async resetSupplierInfo(){
                let pro = {
                    id:this.form.id,
                    supplier_name:this.form.supplier_name,
                    back_img:this.form.back_img,
                    supplier_img:this.form.supplier_img,
                    supplier_content:this.form.supplier_content,
                    freight:this.form.freight
                }
                let res = await this.$Http.resetSupplierInfo({
                    pro:JSON.stringify(pro)
                })
                // console.log(res);
                if(res.code == 200){
                    this.$message.success('信息提交成功！')
                    this.isDisabled = true;
                }
            },
            headSuccess(response, file){
                console.log(response, file)
                this.form.supplier_img = response
                this.$message({
                    type: 'success',
                    message: '上传图片成功'
                });
            },
            headError(err, file, fileList){//图片上传失败调用
                console.log(err, file, fileList)
                this.$message.error('上传图片失败!');
            },
            bgSuccess(response, file){
                console.log(response, file)
                this.form.back_img = response
                this.$message({
                    type: 'success',
                    message: '上传图片成功'
                });
            },
            bgError(err, file, fileList){//图片上传失败调用
                console.log(err, file, fileList)
                this.$message.error('上传图片失败!');
            },
            reset(){
                this.isDisabled = false
            }
        }
    }
</script>

<style scoped>
    .form-table{
        width: 100%;
        background-color: #fff;
        box-sizing: border-box;
        padding:20px;
        margin-top: 20px;
    }
</style>
